<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JWT测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .result { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
        .success { background-color: #d4edda; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; }
        button { margin: 5px; padding: 10px 15px; }
    </style>
</head>
<body>
    <h1>JWT认证测试</h1>
    
    <div>
        <h3>1. 用户登录</h3>
        <input type="text" id="username" placeholder="用户名" value="testuser_t2e5pd2p">
        <input type="password" id="password" placeholder="密码" value="123456">
        <button onclick="login()">登录</button>
        <div id="loginResult" class="result"></div>
    </div>
    
    <div>
        <h3>2. 测试Analytics API</h3>
        <button onclick="testAnalytics()">测试分析数据API</button>
        <div id="analyticsResult" class="result"></div>
    </div>
    
    <div>
        <h3>3. 当前Token</h3>
        <div id="currentToken" class="result"></div>
        <button onclick="showToken()">显示Token</button>
        <button onclick="clearToken()">清除Token</button>
    </div>

    <script>
        function showResult(elementId, success, message, data = null) {
            const element = document.getElementById(elementId);
            element.className = `result ${success ? 'success' : 'error'}`;
            element.innerHTML = `
                <strong>${success ? '成功' : '失败'}:</strong> ${message}
                ${data ? `<pre>${JSON.stringify(data, null, 2)}</pre>` : ''}
            `;
        }

        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            fetch('http://127.0.0.1:5000/api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    localStorage.setItem('userToken', data.data.access_token);
                    showResult('loginResult', true, '登录成功', data.data);
                } else {
                    showResult('loginResult', false, data.message || '登录失败');
                }
            })
            .catch(error => {
                showResult('loginResult', false, '网络错误: ' + error.message);
            });
        }

        function testAnalytics() {
            const token = localStorage.getItem('userToken');
            if (!token) {
                showResult('analyticsResult', false, '请先登录');
                return;
            }

            fetch('http://127.0.0.1:5000/api/scales/7/analytics', {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + token,
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                showResult('analyticsResult', data.success, data.message || '请求完成', data);
            })
            .catch(error => {
                showResult('analyticsResult', false, '网络错误: ' + error.message);
            });
        }

        function showToken() {
            const token = localStorage.getItem('userToken');
            document.getElementById('currentToken').innerHTML = token ? 
                `<strong>当前Token:</strong><br><code>${token}</code>` : 
                '<strong>无Token</strong>';
        }

        function clearToken() {
            localStorage.removeItem('userToken');
            document.getElementById('currentToken').innerHTML = '<strong>Token已清除</strong>';
        }

        // 页面加载时显示当前token
        window.onload = function() {
            showToken();
        };
    </script>
</body>
</html>